<template>
  <div>
    <Swipe :swipeList="swipeList" :isFull="true"/>
    <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="item in muiGirdList" :key="item.src"><router-link :to="item.to">
		                    <img :src="item.img" alt="">
		                    <div class="mui-media-body">{{item.msg}}</div></router-link></li>
		        </ul> 
		</div>
  </div>
</template>
<script>
import menu1 from '../img/menu1.png'
import menu2 from '../img/menu2.png'
import menu3 from '../img/menu3.png'
import menu4 from '../img/menu4.png'
import menu5 from '../img/menu5.png'
import menu6 from '../img/menu6.png'
import Swipe from '../components/swipe.vue'

export default {
  data(){
    return {
      swipeList:null,
      muiGirdList:[
        {img:menu1,msg:"新闻资讯",to:"/home/newsList"},
        {img:menu2,msg:"图文分享",to:"/home/photoList"},
        {img:menu3,msg:"商品购买",to:"/home/shopList"},
        {img:menu4,msg:"留言反馈",to:"#"},
        {img:menu5,msg:"视频专区",to:"#"},
        {img:menu6,msg:"联系我们",to:"#"}
      ]
    }
  },
  components:{
    Swipe
  },
  async created(){
    let data=await this.ajax.get('/api/swipe')
    this.swipeList=data.data
  }




  
}
</script>
<style lang="less" scoped>
 .swiper{
   height: 200px;
   img{
     width: 100%;
     height: 100%;
   }
 }
 .mui-grid-view.mui-grid-9{
   background-color: #fff;
   border: none;
   li{
    border:none  
   }
   img{
     width: 60px;
   }
 }
</style>